<script lang="ts" setup>
import { User, Lock, Promotion } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import { signUp, getCaptcha } from '@/api/sign'
import { ElMessage } from 'element-plus'
import router from '@/router'
import type { SignUpInfo } from '@/types/sign'
const fromModel = ref<SignUpInfo>({
  username: '',
  nickname: '',
  password: '',
  repassword: '',
  token: '',
  code: ''
})
const rules = ref({
  username: [
    { required: true, message: '用户名不能为空', trigger: 'blur' },
    { max: 25, min: 8, message: '用户名必须是2-10为的字符', trigger: 'blur' }
  ],
  nickname: [{ required: true, message: '昵称不能为空', trigger: 'blur' }],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { pattern: /^\S{6,15}$/, message: '密码必须为6-15位的非空字符', trigger: 'blur' }
  ],
  repassword: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    {
      validator: (rule: any, value: any, callback: any) => {
        if (fromModel.value.password !== value) {
          callback(new Error('两次密码输入不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  code: [
    { required: true, message: '验证码不能为空', trigger: 'blur' },
    { pattern: /^[a-zA-Z0-9]{6}$/, message: '验证码必须为6位数字字母', trigger: 'blur' }
  ]
})
const formRef = ref()
const imgUrl = ref('')
const onSubmit = async () => {
  await formRef.value.validate()
  signUp(fromModel.value)
    .then((res) => {
      ElMessage.success(res.msg)
      router.push('/sign/login')
    })
    .catch((res) => {
      ElMessage.error(res.msg)
      getImg()
    })
}

const onLogin = () => {
  router.push('/sign/login')
}
//获取验证码
const getImg = async () => {
  const res = await getCaptcha()
  imgUrl.value = 'data:image/png;base64,' + res.data.img
  fromModel.value.token = res.data.token
}
onMounted(() => {
  getImg()
})
</script>
<template>
  <el-row class="register-page">
    <el-col :lg="15" :md="14"></el-col>
    <el-col class="form" :lg="6" :md="8">
      <!-- <div class="main"> -->
      <el-card shadow="hover">
        <el-form
          ref="formRef"
          :model="fromModel"
          :rules="rules"
          :hide-required-asterisk="false"
          label-width="auto"
          label-position="left"
        >
          <el-form-item>
            <h1 style="margin-bottom: 15px; color: rgb(97, 121, 239)">新用户注册</h1>
          </el-form-item>
          <el-form-item prop="username" label="用户名">
            <el-input
              v-model="fromModel.username"
              :prefix-icon="User"
              clearable
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="nickname" label="昵称">
            <el-input
              v-model="fromModel.nickname"
              :prefix-icon="User"
              clearable
              placeholder="请输入昵称"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password" label="登录密码">
            <el-input
              v-model="fromModel.password"
              :prefix-icon="Lock"
              type="password"
              clearable
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item prop="repassword" label="确认密码">
            <el-input
              v-model="fromModel.repassword"
              :prefix-icon="Lock"
              type="password"
              clearable
              placeholder="请确认密码"
            ></el-input>
          </el-form-item>
          <el-form-item class="code" prop="code" label="验证码">
            <el-input
              v-model="fromModel.code"
              :prefix-icon="Promotion"
              clearable
              placeholder="请输入验证码"
            >
              <template #append>
                <el-image
                  @click="getImg()"
                  style="width: 100px; height: 30px"
                  :src="imgUrl"
                  fit="cover"
                />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <div class="btn-box">
              <el-button type="primary" class="btn" @click="onSubmit()">注册</el-button>
              <el-button type="success" class="btn" @click="onLogin()">登录</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-card>
      <!-- </div> -->
    </el-col>
  </el-row>
</template>
<style lang="less" scoped>
.register-page {
  height: 100vh;

  .form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    user-select: none;

    :deep(.el-form-item__content) {
      //scss 是::v-deep
      justify-content: center;
    }

    :deep(.el-input-group__append) {
      padding: 0;
    }
    .el-image {
      cursor: pointer;
    }

    .btn-box {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .btn {
        width: 45%;
      }
    }
  }
}
</style>
